import React from "react";
import './NewsInfo.scss'
import http from "../../../util/http";
import {WingBlank, WhiteSpace} from 'antd-mobile';
import {Link} from "react-router-dom";
import {DoubleLeftOutlined} from "@ant-design/icons";

class NewsInfo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            newsId: this.props.location.search.split("=")[1] || 0,
            NewsInfo: {},
            NewsType: [],

        }
    }

    componentDidMount() {

        http.get(`api/news/info/${this.state.newsId}`, {page: this.props.pageInfo}).then(({data}) => {
            if (data.code === 200) {
                const NewsInfo = data.data.data.news;
                const NewsType = data.data.data.type;
                this.setState({
                    NewsInfo,
                    NewsType
                })
            } else {
                alert(data.msg)
            }
            console.log(this.state.NewsInfo)
            console.log(this.state.NewsType)
        })
    }

    renderNewsTypeList() {
        return this.state.NewsType.map(item => (
            <span key={item.typeId} className={"NewsInfo-type-item"}>{item.typeName}</span>
        ))
    }

    renderNewsInfo() {
        return (

            <div className={"NewsInfo-main"}>
                <WingBlank>
                    <WhiteSpace/>
                    <div className={"NewsInfo-type"}>
                        {
                            this.renderNewsTypeList()
                        }
                    </div>
                    <div>
                        <span>{this.state.NewsInfo.author}</span>&nbsp;&nbsp;
                        <span>{this.state.NewsInfo.releaseDate}</span>
                    </div>
                    <div>
                        <p>{this.state.NewsInfo.introduction}</p>
                    </div>
                    <div className={"picture"}>
                        <img src={process.env.REACT_APP_BASE_API + "/img/" + this.state.NewsInfo.cover}
                             style={{width: '100%'}}
                        />
                    </div>
                    <div>
                        <p>{this.state.NewsInfo.content}</p>
                    </div>
                </WingBlank>
            </div>


        )
    }


    render() {
        return (this.state.newsId ?
                <div className={"NewsInfo"}>
                    <div className={"header"}>
                        <div className={"header-top"} onClick={() => this.props.history.goBack()}><DoubleLeftOutlined/>返回</div>
                        <div>
                            <h1>{this.state.NewsInfo.title}</h1>
                        </div>
                    </div>
                    {
                        this.renderNewsInfo()
                    }

                </div> : <>

                </>
        )

    }
}

export default NewsInfo
